<template>
  <div class="common-layout">
    <!-- 头部 -->
    <header>
     <h1>数据可视化-ECharts</h1>
     <div class="showTime">{{DateTime}}</div>
    </header>
    
    <!-- 页面主题部分 -->
    <section class="mainbox">
      <!-- 左侧 -->
      <div class="column">
        <div class="panel bar">
          <h2>柱状图-就业行业</h2>
          <div class="chart" ref="main"></div>
          <div class="panel-footer"/>
        </div> 
        <div class="panel line">
          <h2>折线图-人员变化
            <span @click="tabs(1)">2020</span>
            <span @click="tabs(2)">2021</span>
          </h2>
          <div class="chart" ref="line"></div>
          <div class="panel-footer"/>
        </div> 
        <div class="panel pie">
          <h2>饼状图-年龄分布</h2>
          <div class="chart" ref="PieChart" ></div>
          <div class="panel-footer"/>
        </div> 
      </div>
      <!-- 中间 -->
      <div class="column">
        <!-- no模块制作 -->
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>125811</li>
              <li>104563</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>前端需求人数</li>
              <li>市场供应人数</li>
            </ul>
          </div>
        </div>
        <!-- 地图模块 -->
        <div class="map">
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
          <div class="chart" ref="ChinaMap"></div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="column">
          <div class="panel bar">
          <h2>柱状图-就业行业</h2>
          <div class="chart" ref="bar2">图表</div>
          <div class="panel-footer"/>
        </div> 
        <div class="panel line">
          <h2>折线图-播放量</h2>
          <div class="chart" ref="line2"></div>
          <div class="panel-footer"/>
        </div> 
        <div class="panel pie">
          <h2>饼状图-地区分布</h2>
          <div class="chart" ref="PieChart2">图表</div>
          <div class="panel-footer"/>
        </div> 
      </div>
    </section>
  </div>
</template>
<script>
    
export default {
  data(){
    return{
      DateTime:'',//当前时间
      data:[], //人员数据
      linetabs:{},
      lineEcharts:''
    }
  },
  mounted(){
    //柱状图-就业行业
    this.bar1()
    //柱状图2- 横着显示
    this.bar2()
    //折线图 - 人员变化
    this.line1()
    //折线图-播放量
    this.line2()
    //简单饼图
    this.PieCharts1()
    //地区分布-饼图
    this.PieCharts2()
    //中国 --- 地图
    this.ChinaMap()
     //当前时间
    this.dateTime()
  }, 
  methods:{
    //柱状图-就业行业
    bar1(){
      // 1实例化对象
      let myChart = this.$echarts.init(this.$refs.main)
      let option = {
        color: ["#2f89cf"],//修改柱状图的颜色
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // 修改图表的大小
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true
        },
        //X轴相关设置
        xAxis: [
          {
            type: "category",//背影
            data: [
              "旅游行业",
              "教育培训",
              "游戏行业",
              "医疗行业",
              "电商行业",
              "社交行业",
              "金融行业"
            ],
            axisTick: {
              alignWithLabel: true
            },
            // x轴的文字颜色和大小
            axisLabel: {
              color: "rgba(255,255,255,.6) ",
              fontSize: "12"
            },
            // 不显示x坐标轴的样式
            axisLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            //  y 轴文字标签样式
            axisLabel: {
              color: "rgba(255,255,255,.6) ",
              fontSize: 12
            },
            // y轴的线条改为了 2像素
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.8)",
                width: 2,
                type: "solid"
              }
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            }
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "35%",
            data: [200, 300, 300, 900, 1500, 1200, 600],
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5
            }
          }
        ]
      };
      // 3. 把配置项给实例对象
      option && myChart.setOption(option);
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    //柱状图2- 横着显示
    bar2(){
       let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]
      // 1实例化对象
      let myChart2 = this.$echarts.init(this.$refs.bar2)
      // 2. 指定配置和数据
      let option2 = {
        //图表大小
        grid: {
          top: "10%",
          left: "22%",
          bottom: "10%"
          // containLabel: true
        },
        // 不显示x轴的相关信息
        xAxis: {
          show: false
        },
        yAxis: [
          //对象1是刻度左侧名称
          {
            type: "category",
            //解决数据翻转
            inverse: true,
            data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
            // 不显示y轴的线
            axisLine: {
              show: false
            },
            // 不显示刻度
            axisTick: {
              show: false
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: {
              color: "#fff"
            }
          },
          // 对象2是右侧的数据
          {
            data: [702, 350, 610, 793, 664],
            inverse: true,//解决数据翻转
            // 不显示y轴的线Line
            axisLine: {
              show: false
            },
            // 不显示刻度Tick
            axisTick: {
              show: false
            },
            // 把刻度标签里面的文字颜色设置为白色 Label
            axisLabel: {
              color: "#fff"
            }
          }
        ],
        //修改柱子样式
        series: [ 
          {
            name: "条",
            type: "bar",//柱状
            data: [70, 34, 60, 78, 69],//百分比
            //柱状要被框压住
            yAxisIndex: 0,
            // 修改第一组柱子的圆角
            itemStyle: { //样式
              barBorderRadius: 20,
              // 此时的color 可以修改柱子的颜色
              color: function(params) {
                // params 传进来的是柱子对象
                // console.log(params);
                // dataIndex 是当前柱子的索引号
                return myColor[params.dataIndex];
                // return myColor[0];返回索引为0的颜色给color
              }
            },
            // 柱子之间的距离
            barCategoryGap: 50,
            //柱子的宽度
            barWidth: 10,
            // 显示柱子内的文字
            label: {
              show: true,
              position: "inside",//柱子内显示（定位）
              // {c} 会自动的解析为 数据  data里面的数据
              formatter: "{c}%"
              //a 条  b刻度外的名称 c数据
            }
          },
          {
            name: "框",
            type: "bar",
            barCategoryGap: 50,//距离
            barWidth: 15,//宽度
            // 框压住柱状
            yAxisIndex: 1,
            data: [100, 100, 100, 100, 100],
            itemStyle: {
              color: "none",
              borderColor: "#00c1de",//边框色
              borderWidth: 3,//边框宽
              barBorderRadius: 15 //边框圆角
            }
          }
        ]
      }
      //3.渲染
      option2 && myChart2.setOption(option2);
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    //折线图 - 人员变化
    line1(){
      var yearData = [
      {
        year: "2020", // 年份
        data: [
          // 两个数组是因为有两条线
          [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
          [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ]
      },
      {
        year: "2021", // 年份
        data: [
          // 两个数组是因为有两条线
          [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
          [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
        ]
      }
      ];
      this.data = yearData
      //1.实例化对象
      let myChart3 = this.$echarts.init(this.$refs.line)
      this.lineEcharts = myChart3
      //2.指定配置和数据
      this.linetabs = {
        // *3.直接通过这个color修改两条线的颜色
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
          trigger: "axis"
        },
        //*2.图例样式
        legend: {
          // 如果series 对象有name 值，则 legend可以不用写data
          // 修改图例组件 文字颜色
          textStyle: {
            color: "#4c9bfd"
          },
          // 这个10% 必须加引号
          right: "10%"
        },
        //*1.修改图表（网络）大小样式
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true, // 显示边框
          borderColor: "#012f4a", // 图标边框颜色
          containLabel: true // 包含刻度文字在内
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          //*5.X轴标题
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          axisTick: {
            show: false // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd" // 文本颜色
          },
          axisLine: {
            show: false // 去除轴线
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd" // 文本颜色
          },
          axisLine: {
            show: false // 去除轴线
          },
          splitLine: {
            lineStyle: {
              color: "#012f4a" // 分割线颜色
            }
          }
        },
        series: [
          {
            name: "新增粉丝",
            type: "line",
            // *4.true 可以让我们的折线显示带有弧度
            smooth: true,
            //*6.线的数据
            data:this.dd = yearData[0].data[0]
          },
          {
            name: "新增游客",
            type: "line",
            smooth: true,
            data: this.bb= yearData[0].data[1]
          }
        ]
      };
      this.linetabs && myChart3.setOption( this.linetabs);
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    //折线图-播放量
    line2(){
      // 1.实例化对象
      let myChart4 = this.$echarts.init(this.$refs.line2)
     // 2.指定配置和数据
      var option3 = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          top: "0%",
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12"
          }
        },

        grid: {
          left: "10",
          top: "30",
          right: "10",
          bottom: "10",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            // x轴更换数据
            data: [
              "01",
              "02",
              "03",
              "04",
              "05",
              "06",
              "07",
              "08",
              "09",
              "10",
              "11",
              "12",
              "13",
              "14",
              "15",
              "16",
              "17",
              "18",
              "19",
              "20",
              "21",
              "22",
              "23",
              "24",
              "25",
              "26",
              "26",
              "28",
              "29",
              "30"
            ],
            // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12
              }
            },
            // x轴线的颜色为   rgba(255,255,255,.2)
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12
              }
            },
            // 修改分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            }
          }
        ],
        series: [
          {
            name: "邮件营销",
            type: "line",
            smooth: true,
            // 单独修改当前线条的样式
            lineStyle: {
              color: "#0184d5",
              width: "2"
            },
            // 填充颜色设置
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
                  },
                  {
                    offset: 0.8,
                    color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
                  }
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)"
            },
            // 设置拐点
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            // 设置拐点颜色以及边框
            itemStyle: {
              color: "#0184d5",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12
            },
            data: [
              30,
              40,
              30,
              40,
              30,
              40,
              30,
              60,
              20,
              40,
              30,
              40,
              30,
              40,
              30,
              40,
              30,
              60,
              20,
              40,
              30,
              40,
              30,
              40,
              30,
              40,
              20,
              60,
              50,
              40
            ]
          },
          {
            name: "联盟广告",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                color: "#00d887",
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 216, 135, 0.4)"
                    },
                    {
                      offset: 0.8,
                      color: "rgba(0, 216, 135, 0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)"
              }
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 5,
            // 设置拐点颜色以及边框
            itemStyle: {
              color: "#00d887",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            data: [
              130,
              10,
              20,
              40,
              30,
              40,
              80,
              60,
              20,
              40,
              90,
              40,
              20,
              140,
              30,
              40,
              130,
              20,
              20,
              40,
              80,
              70,
              30,
              40,
              30,
              120,
              20,
              99,
              50,
              20
            ]
          }
        ]
      };
      //3.数据渲染到实例上
      option3 && myChart4.setOption( option3);
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    //年龄分布图 -饼图
    PieCharts1(){
      //1.实例化对象
      let myChart5 = this.$echarts.init(this.$refs.PieChart)
      //2.指定配置和数据
      let option4 =  {
        color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
        tooltip: { //提示框
          trigger: "item", //在在饼上触发提示框
          formatter: "{a} <br/>{b}: {c} ({d}%)"
          // a:serues中的name   b:data里面的name   c:data中的value  d：100%
        },
        legend: { // 图例组件
          bottom: "0%",
          // 修改小图标的大小
          itemWidth: 10,
          itemHeight: 10,
          // 修改图例组件的文字为 12px
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12"
          }
        },
        series: [
          {
            name: "年龄分布",
            type: "pie",
            // 这个radius可以修改饼形图的大小
            // radius 第一个值是内圆的半径 第二个值是外圆的半径
            radius: ["40%", "60%"],
            center: ["50%", "45%"],//垂直居中
            avoidLabelOverlap: false,
            // 图形边沿和内部的文字
            label: {
              show: false,
              position: "center"
            },
            // 链接文字和图形的线是否显示
            labelLine: {
              show: false
            },
            data: [
              { value: 1, name: "0岁以下" },
              { value: 4, name: "20-29岁" },
              { value: 2, name: "30-39岁" },
              { value: 2, name: "40-49岁" },
              { value: 1, name: "50岁以上" }
            ]
          }
        ]
      };
      //3.数据渲染到实例上
      option4 && myChart5.setOption( option4);
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    //地区分布-饼图
    PieCharts2(){
      //1.实例化对象
      let myChart6 = this.$echarts.init(this.$refs.PieChart2)
      //2.指定配置和数据
      let option5 = {
      color: [ //1颜色
        "#006cff",
        "#60cda0",
        "#ed8884",
        "#ff9f7f",
        "#0096ff",
        "#9fe6b8",
        "#32c5e9",
        "#1d9dff"
      ], 
      tooltip: { //提示框
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: { //图例
        bottom: "0%",
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "12"
        }
      },
      series: [
        {
          name: "地区分布",
          type: "pie",
          radius: ["10%", "70%"],//2饼的大小
          center: ["50%", "50%"], //4位置
          roseType: "radius",//3半径模式
          // 5图形的文字标签
          label: {
            fontSize: 10
          },
          // 链接图形和文字的线条
          labelLine: {
            // length 链接图形的线条
            length: 6,
            // length2 链接文字的线条
            length2: 8
          },
          data: [
            { value: 20, name: "云南" },
            { value: 26, name: "北京" },
            { value: 24, name: "山东" },
            { value: 25, name: "河北" },
            { value: 20, name: "江苏" },
            { value: 25, name: "浙江" },
            { value: 30, name: "四川" },
            { value: 42, name: "湖北" }
          ]
        }
      ]
      };
      //3.数据渲染到实例上
      option5 && myChart6.setOption( option5);
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    //地图
    ChinaMap(){
      var chinaGeoCoordMap = {
        '黑龙江': [127.9688, 45.368],
        '内蒙古': [110.3467, 41.4899],
        "吉林": [125.8154, 44.2584],
        '北京市': [116.4551, 40.2539],
        "辽宁": [123.1238, 42.1216],
        "河北": [114.4995, 38.1006],
        "天津": [117.4219, 39.4189],
        "山西": [112.3352, 37.9413],
        "陕西": [109.1162, 34.2004],
        "甘肃": [103.5901, 36.3043],
        "宁夏": [106.3586, 38.1775],
        "青海": [101.4038, 36.8207],
        "新疆": [87.9236, 43.5883],
        "西藏": [91.11, 29.97],
        "四川": [103.9526, 30.7617],
        "重庆": [108.384366, 30.439702],
        "山东": [117.1582, 36.8701],
        "河南": [113.4668, 34.6234],
        "江苏": [118.8062, 31.9208],
        "安徽": [117.29, 32.0581],
        "湖北": [114.3896, 30.6628],
        "浙江": [119.5313, 29.8773],
        "福建": [119.4543, 25.9222],
        "江西": [116.0046, 28.6633],
        "湖南": [113.0823, 28.2568],
        "贵州": [106.6992, 26.7682],
        "云南": [102.9199, 25.4663],
        "广东": [113.12244, 23.009505],
        "广西": [108.479, 23.1152],
        "海南": [110.3893, 19.8516],
        '上海': [121.4648, 31.2891]
      };
      var chinaDatas = [
        [{
          name: '黑龙江',
          value: 0
        }],	[{
          name: '内蒙古',
          value: 0
        }],	[{
          name: '吉林',
          value: 0
        }],	[{
          name: '辽宁',
          value: 0
        }],	[{
          name: '河北',
          value: 0
        }],	[{
          name: '天津',
          value: 0
        }],	[{
          name: '山西',
          value: 0
        }],	[{
          name: '陕西',
          value: 0
        }],	[{
          name: '甘肃',
          value: 0
        }],	[{
          name: '宁夏',
          value: 0
        }],	[{
          name: '青海',
          value: 0
        }],	[{
          name: '新疆',
          value: 0
        }],[{
          name: '西藏',
          value: 0
        }],	[{
          name: '四川',
          value: 0
        }],	[{
          name: '重庆',
          value: 0
        }],	[{
          name: '山东',
          value: 0
        }],	[{
          name: '河南',
          value: 0
        }],	[{
          name: '江苏',
          value: 0
        }],	[{
          name: '安徽',
          value: 0
        }],	[{	
            name: '湖北',
          value: 0
        }],	[{
          name: '浙江',
          value: 0
        }],	[{
          name: '福建',
          value: 0
        }],	[{
          name: '江西',
          value: 0
        }],	[{
          name: '湖南',
          value: 0
        }],	[{
          name: '贵州',
          value: 0
        }],[{
          name: '广西',
          value: 0
        }],	[{
          name: '海南',
          value: 0
        }],	[{
          name: '上海',
          value: 1
        }]
      ];
      var convertData = function(data) {
        var res = [];
        for(var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          var fromCoord = chinaGeoCoordMap[dataItem[0].name];
          var toCoord = [116.4551,40.2539];
          if(fromCoord && toCoord) {
            res.push([{
              coord: fromCoord,
              value: dataItem[0].value
            }, {
              coord: toCoord,
            }]);
          }
        }
        return res;
      };
      var series = [];
      [['北京市', chinaDatas]].forEach(function(item, i) {
          series.push({
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: 5, //图标大小
            },
            lineStyle: {
              normal: {
                width: 1, //尾迹线条宽度
                opacity: 1, //尾迹线条透明度
                curveness: .3 //尾迹线条曲直度
              }
            },
            data: convertData(item[1])
          }, {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: { //涟漪特效
              period: 4, //动画时间，值越小速度越快
              brushType: 'stroke', //波纹绘制方式 stroke, fill
              scale: 4 //波纹圆环最大限制，值越大波纹越大
            },
            label: {
              normal: {
                show: true,
                position: 'right', //显示位置
                offset: [5, 0], //偏移设置
                formatter: function(params){//圆环显示文字
                  return params.data.name;
                },
                fontSize: 13
              },
              emphasis: {
                show: true
              }
            },
            symbol: 'circle',
            symbolSize: function(val) {
              return 5+ val[2] * 5; //圆环大小
            },
            itemStyle: {
              normal: {
                show: false,
                color: '#f00'
              }
            },
            data: item[1].map(function(dataItem) {
              return {
                name: dataItem[0].name,
                value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
              };
            }),
          },
          //被攻击点
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              period: 4,
              brushType: 'stroke',
              scale: 4
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                //offset:[5, 0],
                color: '#0f0',
                formatter: '{b}',
                textStyle: {
                  color: "#0f0"
                }
              },
              emphasis: {
                show: true,
                color: "#f60"
              }
            },
            symbol: 'pin',
            symbolSize: 50,
            data: [{
              name: item[0],
              value: chinaGeoCoordMap[item[0]].concat([10]),
            }],
          }
        );
      });
      //1.实例化对象
      let myChart7 = this.$echarts.init(this.$refs.ChinaMap)
      let option6 = {
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(166, 200, 76, 0.82)',
            borderColor: '#FFFFCC',
            showDelay: 0,
            hideDelay: 0,
            enterable: true,
            transitionDuration: 0,
            extraCssText: 'z-index:100',
            formatter: function(params, ticket, callback) {
              //根据业务自己拓展要显示的内容
              var res = "";
              var name = params.name;
              var value = params.value[params.seriesIndex + 1];
              res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
              return res;
            }
          },

          visualMap: { //图例值控制
            min: 0,
            max: 1,
            calculable: true,
            show: false,
            color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
          },
          geo: {
            map: 'china',
            zoom: 1.2,
            label: {
              emphasis: {
                show: false
              }
            },
            roam: true, //是否允许缩放
            itemStyle: {
              normal: {
                areaColor: '#142957',
                borderColor: '#0692a4'
              },
              emphasis: {
                areaColor: '#0b1c2d' //悬浮背景
              }
            }
          },
          series: series
      };
      //3.数据渲染到实例上
      option6 && myChart7.setOption( option6);
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    //切换人员变化数据
    tabs(e){
      if(e == 2){
        this.linetabs.series[0].data = this.data[1].data[0];
        this.linetabs.series[1].data = this.data[1].data[1];
      }else{
        this.linetabs.series[0].data = this.data[0].data[0];
        this.linetabs.series[1].data = this.data[0].data[1];
      }
      //重新渲染
      this.linetabs && this.lineEcharts.setOption( this.linetabs);
    },
    //当前时间
    dateTime(){
      //当前时间
      var t = null;
      t = setTimeout(time, 1000);//開始运行
      this.item
      function time() {
        clearTimeout(t);//清除定时器
        this.DateTime = new Date();
        var y = DateTime.getFullYear();
        var mt = DateTime.getMonth() + 1;
        var day = DateTime.getDate();
        var h = DateTime.getHours();//获取时
        var m = DateTime.getMinutes();//获取分
        var s = DateTime.getSeconds();//获取秒
        document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
        t = setTimeout(time, 1000); //设定定时器，循环运行     
      }
    }
  }
}
 </script>
<style lang="less" scoped>
/* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url(../assets/font/DS-DIGIT.TTF);
}
li {
  list-style: none;
}
.common-layout {
  // display: flex;
  // flex-direction: column;
  // height: 100vh;
  // overflow: auto;
  // background: gray;
  background-image: url('../assets/images/bg.jpg');
  background-repeat: no-repeat;
  // background-position: center;
  background-size: 100% 100%;//横向垂直
  header{
    height: 6rem;
    background: url(../assets/images/head_bg.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  h1{
    color:#fff;
    line-height: 60px;
    font-size: 30px;
    text-align: center;
  }
  .showTime{
    position: absolute;
    right: 20px;
    line-height: 60px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    top: 0;
  }
}
.mainbox{
  min-width: 1024px;
  margin: 0 auto;
  // height: 93vh;
  padding: 10px  10px 0 !important;
  display: flex;
  overflow: auto;
  .column{
    flex: 3;
    &:nth-child(2){
      flex: 5;
      margin: 10px 15px !important;
    }
  }
  .panel{
    position: relative;
    // background-color: pink;
    // height: 360px;
    padding: 15px !important;
    border: 1px solid rgba(25, 186, 139, 0.17);
    background: url(../assets/images/line\(1\).png) rgba(255, 255, 255, 0.04);
    margin-bottom: 15px !important;
    &::before{
      position: absolute;
      content: "";
      width: 10px;
      height: 10px;
      top: 0;
      left: 0;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    }
    &::after{
      position: absolute;
      content: '';
      width: 10px;
      height: 10px;
      top: 0;
      right: 0;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    }
    .panel-footer{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
        &::before{
        position: absolute;
        content: "";
        width: 10px;
        height: 10px;
        bottom: 0;
        left: 0;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      }
      &::after{
        position: absolute;
        content: '';
        width: 10px;
        height: 10px;
        bottom: 0;
        right: 0;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      }
    }
    h2{
      height: 48px;
      color: #fff;
      line-height: 48px;
      font-size: 20px;
      text-align: center;
      font-weight: 400px;
      span {
        color: #fff;
        text-decoration: none;
        margin: 0 10px !important;
        cursor: pointer;
      }
    }
    .chart{
      height:240px ;
      // background-color: pink;
    }
  }
}
//no模块
.no{
  background: rgba(101, 132, 226, 0.1);
  padding: 15px !important;
  .no-hd{
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
    &::before{
      position: absolute;
      content: "";
      width: 30px;
      height: 10px;
      top:0;
      left: 0;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    }
    &::after{
      position: absolute;
      content: "";
      width: 30px;
      height: 10px;
      bottom:0;
      right: 0;
      border-right: 2px solid #02a6b5;
      border-bottom: 2px solid #02a6b5;
    }
    ul{
    display: flex;
      li{
        position: relative;
        flex: 1;
        position: relative;
        line-height:  80px;
        font-size: 70px;
        color: #ffeb7b;
        text-align: center;
        font-family: "electronicFont";
      }
      li:nth-child(1){
        &::after{
          content: '';
          position: absolute;
          top: 25%;
          right: 0;
          height: 50%;
          width: 1px;
          background: rgba(255, 255, 255, 0.2);
        }
      }
    }
  }
  .no-bd{
    ul{
      display: flex;
    }
    li{
      flex: 1;
      text-align: center;
      font-size: 18px;
      color: rgba(225, 225, 255, 0.7);
      line-height: 40px;
      height: 40px;
      padding-top: 10px !important;
    }
  }
}
//
.map{
  height: 810px;
  position: relative;
  .map1 {
    width: 518px;
    height: 518px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../assets/images/map.png);
    background-size: 100% 100%;
    opacity: 0.3;
  }
  .map2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 643px;
    height: 643px;
    background: url(../assets/images/lbx.png);
    animation: rotate1 15s linear infinite;
    opacity: 0.6;
    background-size: 100% 100%;
  }
  .map3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 566px;
    height: 566px;
    background: url(../assets/images/jt.png);
    animation: rotate2 10s linear infinite;
    opacity: 0.6;
    background-size: 100% 100%;
  }
   .chart {
    position: absolute;
    top: 0;
    left: 0;
    // background-color: pink;
    width: 100%;
    height: 825px;
  }
  @keyframes rotate1 {
    form {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @keyframes rotate2 {
    form {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
}
</style>
